<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">指标管理</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">配置中心</li>
          <li class="breadcrumb-item active">指标管理</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-info">
    <form id="searchForm" class="needs-validation form-inline" novalidate="" style="padding: 16px">
      <div class="form-group">
        <label for="gatewayIp">网关ip:</label>
        <input class="form-control ml-2" type="text" id="gatewayIp">
      </div>
      <div class="form-group">
        <button class="btn btn-primary ml-3" type="submit">查询</button>
        <button class="btn btn-default ml-2" type="reset">重置</button>
      </div>
    </form>
  </div>
  <div class="card card-body">
    <table class="table-sm" id="table"></table>
  </div>
</section>

<!-- 表单模态框 -->
<section id="formModalWrapper">
  <div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="formTitle"></h5>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="formContent"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
</section>

<script>


  $(function () {

    window.operateEvents = {
      // 点击详情
      'click .btn_show': function (e, value, row, index) {
        showRow(row.indicatorId)
      }
    }
    var columns = [
      {
        title: '序号',
        field: '',
        align: 'center',
        formatter: function (value, row, index) {
          var pageSize = $('#table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
          var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
          return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
        }
      },
      {
        field: 'indicatorName',
        title: '指标名称',
        align: "center",
      }, {
        field: 'deviceName',
        title: '设备名称',
        align: 'center'
      }, {
        field: 'gatewayIp',
        title: '网关ip',
        align: 'center'
      }, {
        field: 'status',
        title: '状态',
        align: "center",
        formatter: function(value, row, index) {
          if (row.status) {
            return "在线";
          } else {
            return "<span style='color: #DC3545'>离线</span>"
          }
        }
      }, {
        field: 'onlineTime',
        title: '在线时间',
        align: "center"
      }, {
        field: 'serialNumber',
        title: '串口号',
        align: "center",
      }, {
        title: '采集频率',
        align: "center",
        formatter: function (val, row, index) {
          switch (row.frequency) {
            case 0:
              return '不采集';
            case 1:
              return '1分钟';
            case 2:
              return '10分钟';
            case 3:
              return '30分钟';
            case 4:
              return '60分钟';
            case 5:
              return '12小时';
            case 6:
              return '半秒'
            default:
              return null
          }
        }
      }, {
        field: 'startBit',
        title: '开始位',
        align: "center",
      }, {
        field: 'takeBit',
        title: '取位',
        align: "center",
      }, {
        title: '读取进制',
        align: "center",
        formatter: function (val, row, index) {
          if (row.readScale === 16) return '十六进制'
          else if (row.readScale === 10) return '十进制'
          // else if (row.readScale === 2) return '二进制'
          return null
        }
      }, {
        title: '解析进制',
        align: "center",
        formatter: function (val, row, index) {
          if (!row.parseScale) {
            return null
          }
          let scales = row.parseScale.split(",");
          if (scales.length === 1)
            return getDescFromScale(scales[0]);
          for (let i = 1; i < scales.length; i++) {
            if (scales[i - 1] !== scales[i]) {
              return "多种"
            }
          }
          return getDescFromScale(scales[0]);
        }
      }, {
        title: '校验方式',
        align: "center",
        formatter: function (val, row, index) {
          if (row.authCode === 'none') return '无'
          return row.authCode;
        }
      }, {
        title: '反转',
        align: "center",
        formatter: function (val, row, index) {
          if (row.reverse === 0) return '不反转'
          if (row.reverse === 1) return '反转'
          return null
        }
      }, {
        field: 'floatable',
        title: '浮点数',
        align: "center",
        formatter: function (val, row, index) {
          if (row.floatable === 0) return '解析为整数'
          if (row.floatable === 1) return '解析为浮点数'
          return null
        }
      }, {
        field: 'multiple',
        title: '倍数',
        align: "center",
      }, {
        field: 'operation',
        title: '操作',
        align: "center",
        events: operateEvents,
        formatter: operationFormatter
      }];

    function operationFormatter(value, row, index) {
      return '<button class="btn btn-info btn-sm btn_show">详情</button>';
    }

    var options = {
      id: "#table",
      url: '/cfg/indicator',
      columns: columns,
      showRefresh: true,
      queryParams: queryParams
    }
    Core.initTable(options);

    function refreshTable() {
      Core.refreshTable("#table")
    }

    // 查询参数
    function queryParams(params) {
      return {
        page: params.pageNumber,
        size: params.pageSize,
        gatewayIp: $("#gatewayIp").val(),
      };
    }

    // 查询
    $('#searchForm').submit(function (event) {
      event.preventDefault();
      event.stopPropagation();
      refreshTable();
    })

    // 详情
    function showRow(id) {
      Core.load("#formContent", "/load/indicator/" + id, function () {
        $('#formTitle').text('详情')
        $("#formModal").modal('show');
      }, 2);
    }
  });

  function getDescFromScale(scale) {
    if (scale === "0") return "ascii码"
    if (scale === "2") return "二进制"
    if (scale === "10") return "十进制"
    return null;
  }

</script>